<template>
  <!-- 农户发布模块 -->
    <div class="issue w clearfix">
       <!-- 筛选模块 -->
        <div class="screen clearfix">
            <h3>筛选条件</h3>
            <div class="tj">
                <span class="tj_content">区域</span>
                <a href="#"><span class="all">全部</span></a>
                <a href="#">武康镇</a>
                <a href="#">乾元镇</a>
                <a href="#">新市镇</a>
                <a href="#">洛舍镇</a>
                <a href="#">新安镇</a>
                <a href="#">雷甸镇</a>
                <a href="#">钟管镇</a>
                <a href="#">禹越镇</a>
                <a href="#">莫干山镇</a>
                <a href="#">筏头乡</a>
                <a href="#">三合乡</a>
            </div>
            <div class="tj">
                <span class="tj_content">抵押年限</span>
                <a href="#"><span class="all">全部</span></a>
                <a href="#">1-5年</a>
                <a href="#">5-10年</a>
                <a href="#">10-15年</a>
                <a href="#">15-20年</a>
            </div>
            <div class="tj">
                <span class="tj_content">贷款金额</span>
                <a href="#"><span class="all">全部</span></a>
                <a href="#">10-20万元</a>
                <a href="#">20-30万元</a>
                <a href="#">30-40万元</a>
                <a href="#">40-50万元</a>
                <a href="#">50-100万元</a>
                <a href="#">100万元以上</a>
            </div>
        </div>
        <!-- 列表模块 -->
        <ul>
            <li>
                <img src="../../assets/style/img/issue_image/image1.png" alt="">
                <div class="content">
                    <h4>德清县东衡村宅基地抵押贷款</h4>
                    <span class="dy">抵押</span><span class="time">10年</span><span class="phone"><img src="../../assets/style/img/issue_image/电话.svg" alt=""> 13732371425
</span>
                    <p class="p1"><span class="gray">地类：</span> 住宅类丨宅基地 <span class="mj"><span class="gray">面积：</span> 240㎡</span>
                    </p>
                    <p><span class="gray">地址：</span> 德清县洛舍镇东衡村南草塘95号
</p>
                    <p class="xx"><i class="icon-coronarenderer"></i> 沈建章 <span class="rig"><img src="../../assets/style/img/issue_image/发布时间@2x.svg" alt=""><span class="gray"> 2021-09-01</span> </span>
                    </p>
                </div>
            </li>
            <li>
                <img src="../../assets/style/img/issue_image/image2.png" alt="">
                <div class="content">
                    <h4>德清县东衡村宅基地抵押贷款</h4>
                    <span class="dy">抵押</span><span class="time">10年</span><span class="phone"><img src="../../assets/style/img/issue_image/电话.svg" alt="">15957298917
</span>
                    <p class="p1"><span class="gray">地类：</span> 住宅类丨宅基地 <span class="mj"><span class="gray">面积：</span> 240㎡</span>
                    </p>
                    <p><span class="gray">地址：</span> 德清县洛舍镇东衡村南草塘98号</p>
                    <p class="xx"><i class="icon-coronarenderer"></i> 沈菊明
 <span class="rig"><img src="../../assets/style/img/issue_image/发布时间@2x.svg" alt=""><span class="gray"> 2021-09-01</span> </span>
                    </p>
                </div>
            </li>
            <li>
                <img src="../../assets/style/img/issue_image/image3.png" alt="">
                <div class="content">
                    <h4>德清县东衡村宅基地抵押贷款</h4>
                    <span class="dy">抵押</span><span class="time">10年</span><span class="phone"><img src="../../assets/style/img/issue_image/电话.svg" alt=""> 13567265211
</span>
                    <p class="p1"><span class="gray">地类：</span> 住宅类丨宅基地 <span class="mj"><span class="gray">面积：</span> 240㎡</span>
                    </p>
                    <p><span class="gray">地址：</span> 德清县洛舍镇东衡村南草塘87号
</p>
                    <p class="xx"><i class="icon-coronarenderer"></i> 沈学祥
 <span class="rig"><img src="../../assets/style/img/issue_image/发布时间@2x.svg" alt=""><span class="gray"> 2021-09-01</span> </span>
                    </p>
                </div>
            </li>
            <li>
                <img src="../../assets/style/img/issue_image/image4.png" alt="">
                <div class="content">
                    <h4>德清县东衡村宅基地抵押贷款</h4>
                    <span class="dy">抵押</span><span class="time">10年</span><span class="phone"><img src="../../assets/style/img/issue_image/电话.svg" alt="">13757211774
</span>
                    <p class="p1"><span class="gray">地类：</span> 住宅类丨宅基地 <span class="mj"><span class="gray">面积：</span> 240㎡</span>
                    </p>
                    <p><span class="gray">地址：</span>德清县洛舍镇东衡村北草塘96号
</p>
                    <p class="xx"><i class="icon-coronarenderer"></i> 金有林
 <span class="rig"><img src="../../assets/style/img/issue_image/发布时间@2x.svg" alt=""><span class="gray"> 2021-09-01</span> </span>
                    </p>
                </div>
            </li>
            <li>
                <img src="../../assets/style/img/issue_image/image1.png" alt="">
                <div class="content">
                    <h4>德清县东衡村宅基地抵押贷款</h4>
                    <span class="dy">抵押</span><span class="time">10年</span><span class="phone"><img src="../../assets/style/img/issue_image/电话.svg" alt="">13666529040
</span>
                    <p class="p1"><span class="gray">地类：</span> 住宅类丨宅基地 <span class="mj"><span class="gray">面积：</span> 240㎡</span>
                    </p>
                    <p><span class="gray">地址：</span> 德清县洛舍镇东衡村南草塘80号
</p>
                    <p class="xx"><i class="icon-coronarenderer"></i> 沈学年
 <span class="rig"><img src="../../assets/style/img/issue_image/发布时间@2x.svg" alt=""><span class="gray"> 2021-09-01</span> </span>
                    </p>
                </div>
            </li>
            <li>
                <img src="../../assets/style/img/issue_image/image2.png" alt="">
                <div class="content">
                    <h4>德清县东衡村宅基地抵押贷款</h4>
                    <span class="dy">抵押</span><span class="time">10年</span><span class="phone"><img src="../../assets/style/img/issue_image/电话.svg" alt=""> 13906828429
</span>
                    <p class="p1"><span class="gray">地类：</span> 住宅类丨宅基地 <span class="mj"><span class="gray">面积：</span> 240㎡</span>
                    </p>
                    <p><span class="gray">地址：</span> 德清县洛舍镇东衡村南草塘81号
</p>
                    <p class="xx"><i class="icon-coronarenderer"></i> 沈凤璋
 <span class="rig"><img src="../../assets/style/img/issue_image/发布时间@2x.svg" alt=""><span class="gray"> 2021-09-01</span> </span>
                    </p>
                </div>
            </li>
            <li>
                <img src="../../assets/style/img/issue_image/image3.png" alt="">
                <div class="content">
                    <h4>德清县东衡宅基地抵押贷款</h4>
                    <span class="dy">抵押</span><span class="time">10年</span><span class="phone"><img src="../../assets/style/img/issue_image/电话.svg" alt=""> 13738214580
</span>
                    <p class="p1"><span class="gray">地类：</span> 住宅类丨宅基地 <span class="mj"><span class="gray">面积：</span> 240㎡</span>
                    </p>
                    <p><span class="gray">地址：</span> 德清县洛舍镇东衡村南草塘85号
</p>
                    <p class="xx"><i class="icon-coronarenderer"></i> 姚林章
 <span class="rig"><img src="../../assets/style/img/issue_image/发布时间@2x.svg" alt=""><span class="gray"> 2021-09-01</span> </span>
                    </p>
                </div>
            </li>
            <li>
                <img src="../../assets/style/img/issue_image/image4.png" alt="">
                <div class="content">
                    <h4>德清县东衡村宅基地抵押贷款</h4>
                    <span class="dy">抵押</span><span class="time">10年</span><span class="phone"><img src="../../assets/style/img/issue_image/电话.svg" alt=""> 13515820841
</span>
                    <p class="p1"><span class="gray">地类：</span> 住宅类丨宅基地 <span class="mj"><span class="gray">面积：</span> 240㎡</span>
                    </p>
                    <p><span class="gray">地址：</span> 德清县洛舍镇东衡村南草塘83号
</p>
                    <p class="xx"><i class="icon-coronarenderer"></i> 沈金龙
 <span class="rig"><img src="../../assets/style/img/issue_image/发布时间@2x.svg" alt=""><span class="gray"> 2021-09-01</span> </span>
                    </p>
                </div>
            </li>
            <li>
                <img src="../../assets/style/img/issue_image/image1.png" alt="">
                <div class="content">
                    <h4>德清县东衡村宅基地抵押贷款</h4>
                    <span class="dy">抵押</span><span class="time">10年</span><span class="phone"><img src="../../assets/style/img/issue_image/电话.svg" alt=""> 13808526913
</span>
                    <p class="p1"><span class="gray">地类：</span> 住宅类丨宅基地 <span class="mj"><span class="gray">面积：</span> 240㎡</span>
                    </p>
                    <p><span class="gray">地址：</span> 德清县洛舍镇东衡村北草塘101号
</p>
                    <p class="xx"><i class="icon-coronarenderer"></i> 杨生龙
 <span class="rig"><img src="../../assets/style/img/issue_image/发布时间@2x.svg" alt=""><span class="gray"> 2021-09-01</span> </span>
                    </p>
                </div>
            </li>
            <li>
                <img src="../../assets/style/img/issue_image/image2.png" alt="">
                <div class="content">
                    <h4>德清县东衡村宅基地抵押贷款</h4>
                    <span class="dy">抵押</span><span class="time">10年</span><span class="phone"><img src="../../assets/style/img/issue_image/电话.svg" alt="">13706829781
</span>
                    <p class="p1"><span class="gray">地类：</span> 住宅类丨宅基地 <span class="mj"><span class="gray">面积：</span> 240㎡</span>
                    </p>
                    <p><span class="gray">地址：</span> 德清县洛舍镇东衡村北草塘99号
</p>
                    <p class="xx"><i class="icon-coronarenderer"></i> 杨金华
 <span class="rig"><img src="../../assets/style/img/issue_image/发布时间@2x.svg" alt=""><span class="gray"> 2021-09-01</span> </span>
                    </p>
                </div>
            </li>
            <li>
                <img src="../../assets/style/img/issue_image/image3.png" alt="">
                <div class="content">
                    <h4>德清县东衡村宅基地抵押贷款</h4>
                    <span class="dy">抵押</span><span class="time">10年</span><span class="phone"><img src="../../assets/style/img/issue_image/电话.svg" alt="">15167227886
</span>
                    <p class="p1"><span class="gray">地类：</span> 住宅类丨宅基地 <span class="mj"><span class="gray">面积：</span> 240㎡</span>
                    </p>
                    <p><span class="gray">地址：</span>德清县洛舍镇东衡村北草塘90号
</p>
                    <p class="xx"><i class="icon-coronarenderer"></i> 沈金浩
 <span class="rig"><img src="../../assets/style/img/issue_image/发布时间@2x.svg" alt=""><span class="gray"> 2021-09-01</span> </span>
                    </p>
                </div>
            </li>
            <li>
                <img src="../../assets/style/img/issue_image/image4.png" alt="">
                <div class="content">
                    <h4>德清县李家村宅基地抵押贷款</h4>
                    <span class="dy">抵押</span><span class="time">10年</span><span class="phone"><img src="../../assets/style/img/issue_image/电话.svg" alt="">13738210776
</span>
                    <p class="p1"><span class="gray">地类：</span> 住宅类丨宅基地 <span class="mj"><span class="gray">面积：</span> 240㎡</span>
                    </p>
                    <p><span class="gray">地址：</span>德清县洛舍镇东衡村北草塘98号
</p>
                    <p class="xx"><i class="icon-coronarenderer"></i> 姚会根
 <span class="rig"><img src="../../assets/style/img/issue_image/发布时间@2x.svg" alt=""><span class="gray"> 2021-09-01</span> </span>
                    </p>
                </div>
            </li>
        </ul>
        <!-- 客服服务模块 -->
        <div class="serviceperson clearfix">
            <div class="person">
                <div class="free left">免费咨询</div>
                <div class="only right">
                  <img src="../../assets/style/img/service_image/在线咨询.svg" alt="">
                  </div>
            </div>
            <div class="service">
                <div class="number">
                    <p><span class="icon-wechat"></span> 专属客服001 <i class="icon-cheveron-down"></i></p>
                </div>
                <div class="message">
                    <i class="icon-wechat"></i>
                    <div class="dh">
                        <p>您好，我是您的专属金融客服001，请问有什么可以帮到您？</p>
                    </div>
                </div>
                <div class="input_content">
                    <p><span class="icon-smile"></span><span class="icon-image"></span></p>
                    <textarea name="" id="" cols="50" rows="6" placeholder="请输入您的问题  按Enter直接发送"></textarea>
                    <button>发送</button>
                </div>
            </div>
        </div>
        <!-- 客服模块end -->
    </div>
</template>

<script>
import '../service'

export default {
  name:'Issue',
//   data() {
//     return {
//       flag: true,
//       isEnter: true
//     }
//   },
//   methods: {
//     enter(){
// this.isEnter=true
//     },
//     click(){
//       if(this.flag){
//         this.flag=!this.flag
//       }else{
//         this.flag=true
//       }
//     }
//   },
}
</script>

<style lang='less' scoped>
.issue{
  position: relative;
  .rig{
    float: right;
  }
  // 筛选模块
  .screen{
    padding-top: 20px;
    h3{
      font-size: 24px;
      color: #333333;
    }
    .tj{
      position: relative;
      margin-left: 94px;
      font-size: 16px;
      color: #666666;
      padding: 20px 0;
      border-bottom: 1px solid #DCDEE2;
      .tj_content{
        position: absolute;
        top: 20px;
        left: -94px;
        color: #333333;
        font-weight: 600;
        margin-right: 30px;
      }
      .all{
        color: #EE384A;
        font-weight: 600;
      }
      a{
        margin-right: 30px;
      }
    }
  }
// 列表模块
  ul{
      margin-top: 30px;

  li{
    margin: 0 20px 20px 0;
    float: left;
    width: 285px;
    height: 393px;
    overflow: hidden;
    border: 1px solid #D8D8D8;
  }
  :nth-child(4n+4){
    margin-right: 0;
  }
}
.content{
  padding: 12px 16px 0 16px;
  width: 100%;
  vertical-align: middle;
  // height: ;
  // background: pink;
  color: #333333;
  letter-spacing: 0;

  h4{
    margin-bottom: 10px;
    font-family: PingFangSC-Semibold;
    font-size: 16px;
    // color: #333333;
    // letter-spacing: 0;
    font-weight: 600;
  }
  p{
    font-family: PingFangSC-Regular;
    font-size: 12px;
    // color: #333333;
    // letter-spacing: 0;
    line-height: 17px;
    font-weight: 400;
    color: #333333;
    .mj{
      // text-align: right;
      float: right;
    }
  }
  .dy{
    padding: 0 8px;
    // margin: 10px 0 12px;
    color: #EE384A;
    background: rgba(238, 56, 74, .1);
    border-radius: 1px;
  }
  .time{
    padding: 0 8px;
    margin-left: 4px;
    color: #437AFF;
    background: rgba(67, 122, 255, .1);
    border-radius: 1px;
  }
  .phone{
    float: right;
    color: #666666;
  }
  .p1{
    margin: 13px 0 10px;
  }
  .xx{
    margin: 16px 0 0 0;
    padding-top: 10px;
    border-top: 1px solid #E8E8E8;
  }
  .gray{
    color: #888;
  }
  .touxiang{
    display: inline-block;
    overflow: hidden;
    width: 22px;
    height: 22px;
    border-radius: 50%;
  }
}
}

// 客服咨询模块
.serviceperson{
  z-index: 999;
  position: absolute;
  top: 390px;
  right: -370px;
  width: 480px;
  font-family: PingFangSC-Regular;
  letter-spacing: 0;
  .person{
    position: relative;
    width: 480px;
    height: 60px;
    margin-bottom: 30px;
    text-align: center;

    .free{
      position: relative;
      margin-top: 7px;
      float: left;
      width: 100px;
      height: 46px;
      background: #999;
      font-size: 16px;
      color: #FFFFFF;
      font-weight: 400;
      line-height: 46px;
      display: none;
    }
    .free::after {
      content: '';
      position: absolute;
      border: 8px solid;
      border-color: transparent transparent transparent #999;
      right: -16px;
      top: 16px;
}
    .right{
      position: absolute;
      top: 0;
      left: 110px;
      width: 60px;
      height: 60px;
      background: #EE384A;
      border-radius: 8px;
      padding-top: 12px;
    }
  }
  .service{
    display: none;
    width: 480px;
    height: 542px;
    background: #FFFFFF;
    box-shadow: -2px 0px 6px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
    .number{
      position: relative;
      height: 44px;
      background: #EE384A;
      border-radius: 8px 8px 0px 0px;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #FFFFFF;
      font-weight: 600;
      line-height: 44px;
      p{
        padding-left: 50px;
      }
      .icon-wechat{
        position: absolute;
        top: 6px;
        left: 10px;
        color: black;
        font-size: 28px;
      }
      .icon-cheveron-down{
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 18px;
      }
    }
    .message{
      position: relative;
      width: 480px;
      height: 326px;
      border-bottom: 1px solid #D8D8D8;
      .dh{
        position: absolute;
        top: 30px;
        left: 56px;
        width: 373px;
        height: 64px;
        padding: 16px 20px;
        background: #F5F5F5;
        font-size: 14px;
        color: #333333;
        text-align: justify;
        font-weight: 400;
        ::before {
          content: '';
          position: absolute;
          border: 8px solid;
          border-color: transparent #F5F5F5 transparent transparent;
          left: -16px;
          top: 24px;
    }
      }
      .icon-wechat{
        font-size: 28px;
        position: absolute;
        top: 40px;
        left: 8px;
      }
    }
    .input_content{
      position: relative;
      p{
        padding-left: 12px;
        margin-top: 12px;
      }
      span{
        font-size: 20px;
        margin-right: 12px;
      }
      textarea{
        padding: 6px 10px;
        border: 0;
        outline: none;
	      resize: none;
      }
      button{
        position: absolute;
        bottom: -22px;
        right: 16px;
        width: 40px;
        height: 24px;
        background: #EE384A;
        border-radius: 4px;
      }
    }
  }
}
</style>